<template>
  <div>
    <el-breadcrumb class="app-breadcrumb" separator="/">
      <transition-group name="breadcrumb">
        <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
          <span v-if="item.meta.title!='首页'">
            <span
              v-if="item.redirect==='noRedirect'||index==levelList.length-1"
              class="no-redirect"
              :class="{'highlight':$route.path == item.path}"
            >{{ item.meta.title }}</span>
            <!-- <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a> -->
            <a v-else>{{ item.meta.title }}</a>
          </span>
          <div v-else class="about-wrap">
            <img src="@/assets/mutou.png" alt />
            <div class="text-box">
              <Subtitle :sendVal="newItems"></Subtitle>
            </div>
            <span class="more-btn" @click="openHandle">了解更多 ></span>
          </div>
        </el-breadcrumb-item>
      </transition-group>
    </el-breadcrumb>
    <el-dialog
      :visible.sync="aboutFlag"
      :close-on-click-modal="false"
      :lock-scroll="false"
      width="520px"
      custom-class="about-dialog"
    >
      <span slot="title" class="dialog-title">
        <i></i>
        <span>关于云木屋</span>
      </span>

      <div class="about-content">
        <p>云木屋，指的是木头云平台上代理商的小店。普通买家加入木头云平台开办云木屋，即可通过云木屋代理优选商家发布的【有订金】产品或【无订金】产品（木材/家具），从中获得一定的代理费。</p>
        <p>其中：</p>
        <p>1、您选择【有订金】的方式代理一批木材/家具，不管是否销售成功，都可获得一定的代理推广费；代理期满，返还订金，结束代理关系。</p>
        <p>2、您选择【无订金】的方式代理一批木材/家具，只有成功销售，才能获得一定的代理推广费。</p>
      </div>

      <div slot="footer" class="dialog-footer">
        <div class="footer-wrap">
          <h2>
            <span>*</span>温馨提示
          </h2>
          <div>
            <p>1、只有在商品界面标示【有订金】或【无订金】的产品才可以代理。</p>
            <p>2、平台所有用户均可申请开通【云木屋】，成为代理商。</p>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as pathToRegexp from "path-to-regexp";
// import pathToRegexp from "path-to-regexp";
import Subtitle from "./subtitle";
export default {
  data() {
    return {
      levelList: null,
      aboutFlag: false,
      newItems: [
        {
          name: "",
          detail:
            "【平台介绍】云木屋，指的是木头云平台上代理商的小店。普通买家加入木头云平台开办云木屋，即可通过云木屋代理优选商家发布的【有订金】产品或【无订金】产品（木材/家具），从中获得一定的代理费。",
        },
        {
          name: "",
          detail:
            "【平台介绍】云木屋，指的是木头云平台上代理商的小店。普通买家加入木头云平台开办云木屋，即可通过云木屋代理优选商家发布的【有订金】产品或【无订金】产品（木材/家具），从中获得一定的代理费。",
        },
      ],
    };
  },
  components: {
    Subtitle,
  },
  watch: {
    $route(route) {
      // if you go to the redirect page, do not update the breadcrumbs
      if (route.path.startsWith("/redirect/")) {
        return;
      }
      this.getBreadcrumb();
    },
  },
  created() {
    this.getBreadcrumb();
  },
  methods: {
    openHandle() {
      this.aboutFlag = true;
    },
    getBreadcrumb() {
      // only show routes with meta.title
      let matched = this.$route.matched.filter(
        (item) => item.meta && item.meta.title
      );
      const first = matched[0];

      // if (!this.isDashboard(first)) {
      //   matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
      // }

      this.levelList = matched.filter(
        (item) => item.meta && item.meta.title && item.meta.breadcrumb !== false
      );
    },
    isDashboard(route) {
      const name = route && route.name;
      if (!name) {
        return false;
      }
      return (
        name.trim().toLocaleLowerCase() === "Dashboard".toLocaleLowerCase()
      );
    },
    pathCompile(path) {
      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
      const { params } = this.$route;
      var toPath = pathToRegexp.compile(path);
      return toPath(params);
    },
    handleLink(item) {
      const { redirect, path } = item;
      if (redirect) {
        this.$router.push(redirect);
        return;
      }
      this.$router.push(this.pathCompile(path));
    },
  },
};
</script>

<style lang="scss">
.about-dialog {
  min-height: 600px;
  font-size: 14px;
  .el-dialog__header {
    border-bottom: 1px solid rgba(234, 239, 251, 1);
    padding-bottom: 15px;
    .dialog-title {
      i {
        padding: 3px 2px;
        background: #fe6616;
        margin-right: 15px;
        border-radius: 10px;
      }
      span {
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
      }
    }
  }
  .el-dialog__body {
    padding: 20px;
  }
  .el-dialog__footer {
    background: #fff;
    padding: 25px 30px;
    border-top: 1px solid #ebf0f2;
    text-align: left;
    width: 100%;
    .dialog-footer {
      .footer-wrap {
        h2 {
          font-size: 16px;
          color: #333;
          font-weight: bold;
          span {
            color: red;
          }
        }
        p {
          color: #999;
          &.rcharge-p {
            line-height: 24px;
          }
        }
      }
    }
  }
}
</style>

<style lang="scss" scoped>
.about-dialog {
  .about-content {
    line-height: 26px;
  }
}
.app-breadcrumb.el-breadcrumb {
  display: inline-block;
  font-size: 14px;
  line-height: 60px;
  margin-left: 8px;
  color: #999;

  .no-redirect {
    color: #333;
    cursor: text;
  }
}
.el-breadcrumb {
  color: #999;
  a {
    color: #999;
  }
  .hightlight {
    color: #666;
  }
}
.about-wrap {
  position: relative;
  margin-left: 40px;
  display: flex;
  img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .text-box {
    max-width: 370px;
    margin-left: 50px;
    span {
      word-break: break-word; /* 文本行的任意字内断开 */
      word-wrap: break-word; /* IE */
      white-space: -moz-pre-wrap; /* Mozilla */
      white-space: -hp-pre-wrap; /* HP printers */
      white-space: -o-pre-wrap; /* Opera 7 */
      white-space: -pre-wrap; /* Opera 4-6 */
      white-space: pre; /* CSS2 */
      white-space: pre-wrap; /* CSS 2.1 */
      white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      line-clamp: 1;
      -webkit-box-orient: vertical;
    }
  }
  .more-btn {
    color: #999;
    margin-left: 25px;
    cursor: pointer;
    &:hover {
      color: #ff6f47;
    }
  }
}
</style>
